<template>
  <div class="tag-list" v-if="tags.length > 0">
    <div class="tag-cloud">
      <h5 class="title"><i class="fa fa-tags"></i> 标签云</h5>
      <div class="underline"></div>
      <div class="tags">
        <span
          v-for="tag in tags"
          :key="tag.text"
          :style="{ backgroundColor: tag.color }"
          @click="selectTag(tag)"
          class="tag"
          :title="'【'+tag.text+'】标签下有'+tag.article_count+'篇文章'"
        >
        {{ tag.text }}
        </span>
      </div>
        <button class="btn btn-more" @click="showAllTags">查看更多...</button>
    </div>
  </div>
</template>

<script setup>
// 路由
const router = useRouter();

// 响应式数据
const tags = ref([]);

// 方法
const fetchTags = async () => {
  try {
    const response = await axios.get("/api/cms/tags/get_random_tags/");
    tags.value = response.data?.map(tag => ({
      id: tag.id,
      text: tag.name,
      color: tag.color_code,
      article_count: tag.article_count,
    })) || [];
  } catch (error) {
    console.error("获取标签数据失败:", error);
  }
};

const selectTag = (tag) => {
  router.push({
    name: "tag-detail",
    params: {
    id: tag.id,
    },
  });
};
const showAllTags = () => {
  router.push({
    name: "tags",
  });
};



// 生命周期
onMounted(() => {
  fetchTags();
});
</script>

<style scoped>
.tag-list {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  background-color: var(--card-bg-color, #fff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.tag-cloud {
  background-color: var(--card-bg-color, #fff);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--card-title-color, #333);
}


.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.tag {
  padding: 5px 12px;
    float: left;
    text-align: center;
    border-radius: .35rem;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s;
}

.tag:hover {
  transform: scale(1.1);

}

.btn-more {
  display: block;
  margin-top: 15px;
  width: 100%;
  padding: 4px 10px;
  background-color: #018786;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}

.btn-more:hover {
  background-color: #02675c;
}
</style>
